<script setup lang="ts">
import {onMounted, ref,watch} from "vue";
import {showToast} from "vant";
import {useRouter,useRoute} from "vue-router";

const route = useRoute()
const router = useRouter()
const active = ref('home');
const DEFAULT_TITLE = '伙伴匹配';
const title = ref(DEFAULT_TITLE);

watch(() => route.name, (newName) => {
  if (newName) {
    title.value = newName;
  }
}, { immediate: true });// 监听路由变化,异步加载问题：在某些情况下，路由信息可能还没有完全加载完毕，导致 route.name 暂时不可用。你可以尝试使用 nextTick 或者 watch 来监听 route 的变化。
const loading = ref(false);

const onRefresh = () => {
  setTimeout(() => {
    loading.value = false;
  }, 1000);
};
const reload = (event) => {
  event.stopPropagation(); // 阻止事件冒泡
  window.location.reload();
}

</script>

<template>

  <van-nav-bar :title="title" left-arrow @click-left="router.back">
    <template #right>
      <IconFont class="icon-shua" size="110%" name="refresh" @click="reload"></IconFont>
    </template>
  </van-nav-bar>
  <div id="content">
    <router-view/>
<!--    <van-pull-refresh v-model="loading" @refresh="onRefresh" success-text="刷新成功">-->
<!--    </van-pull-refresh>-->

  </div>
  <van-tabbar route v-model="active">
    <van-tabbar-item icon="home-o" name="home" to="/home">主页</van-tabbar-item>
    <van-tabbar-item icon="search" name="team" to="/team">队伍</van-tabbar-item>
    <van-tabbar-item icon="friends-o" name="user" to="/user">个人</van-tabbar-item>
  </van-tabbar>

</template>

<style scoped>
#content{
  padding-bottom: 50px;
}
.icon-shua {

  color: #2B95EF;
}
</style>